<template>
  <div class="container">
    <div
      v-for="(item, index) in showOptions"
      :key="index"
      class="nav"
      @click="item.fn"
    >
      {{ isFull ? "Exit" : "F11" }}
    </div>
  </div>
</template>

<script setup lang="ts" name="HomeNav">
import { ref, onMounted } from "vue";
interface navType {
  optionsId: number;
  optionsName: string;
  desc: string;
  fn: () => void;
}
let props = withDefaults(
  defineProps<{
    options?: string[];
  }>(),
  {
    options: () => {
      return [];
    },
  }
);

// 需要显示的配置
let showOptions = ref<navType[]>([]);
// 是否全屏
let isFull = ref(false);

// 全屏 | 退出全屏 操作函数
let FullscreenFn = () => {
  let el = document.documentElement;
  isFull.value = !isFull.value;
  // 是全屏就退出 不是开启全屏
  isFull.value ? el.requestFullscreen() : document.exitFullscreen();
};

let currentOptions: navType[] = [
  {
    optionsId: 1,
    optionsName: "full",
    desc: "全屏|退出全屏",
    fn: FullscreenFn,
  },
];

// 需要显示的配置
let showOptionsFn = () => {
  currentOptions.forEach((item: navType) => {
    if (props.options.includes(item.optionsName)) {
      showOptions.value.push(item);
    }
  });
};

onMounted(() => {
  showOptionsFn();
});
</script>

<style lang="less" scoped>
.container {
  position: absolute;
  width: 860px;
  min-height: 60px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0px 16px;
  border-radius: 6px;
  .nav {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: paleturquoise;
    text-align: center;
    line-height: 46px;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 2px red 5px;
    }
  }
}
</style>
